<template>
    <div>
        <el-container>
            <el-header height="100px" width="100%">
                <el-form :inline="true" :model="searchForm" class="demo-form-inline" size="mini">
                    <el-form-item label="Name">
                        <el-input v-model="searchForm.name" placeholder="Item Name"></el-input>
                    </el-form-item>
                    <el-form-item label="Gender">
                        <el-select v-model="searchForm.gender" placeholder="gender">
                            <el-option label="F" value="F"></el-option>
                            <el-option label="M" value="M"></el-option>
                            <el-option label="M/F" value="M/F"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="Age">
                        <el-input v-model="searchForm.age" placeholder="Age"></el-input>
                    </el-form-item>
                    <el-form-item label="Focus_Tier1">
                        <el-input v-model="searchForm.focusTier1"></el-input>
                    </el-form-item>
                    <el-form-item label="Focus_Tier2">
                        <el-input v-model="searchForm.focusTier2"></el-input>
                    </el-form-item>
                    <el-form-item label="List_Price">
                        <el-input v-model="searchForm.listPrice"></el-input>
                    </el-form-item>
                    <el-form-item label="Cost">
                        <el-input v-model="searchForm.cost"></el-input>
                    </el-form-item>
                    <el-form-item label="Revenue">
                        <el-input v-model="searchForm.revenue"></el-input>
                    </el-form-item>
                    <el-form-item label="Discount">
                        <el-input v-model="searchForm.discount"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit" size="small">search</el-button>
                    </el-form-item>
                </el-form>
            </el-header>

            <el-main>
                <el-row :span="24">
                    <el-col :span="22">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="currentPage" :page-sizes="[10, 30, 50, 100]" :page-size="size"
                            layout="total, sizes, prev, pager, next, jumper" :total="total">
                        </el-pagination>
                    </el-col>
                    <el-col :span="2">
                        <el-button type="primary" icon="el-icon-plus" @click="showAddDialog" size="small"></el-button>
                    </el-col>

                </el-row>

                <el-table :data="tableData" style="width: 100%" height="750px" max-height="750px" border stripe>
                    <el-table-column prop="id" label="No" width="45">
                    </el-table-column>
                    <el-table-column prop="category" label="Category" width="100">
                    </el-table-column>
                    <el-table-column prop="code" label="Code" width="100">
                    </el-table-column>
                    <el-table-column prop="name" label="Name" width="120">
                    </el-table-column>
                    <el-table-column prop="chineseName" label="Chinese Name" width="150">
                    </el-table-column>
                    <el-table-column prop="gender" label="Gender" width="120">
                    </el-table-column>
                    <el-table-column prop="age" label="Age" width="60">
                    </el-table-column>
                    <el-table-column prop="focusTier1" label="Focus_Tier1" width="120">
                    </el-table-column>
                    <el-table-column prop="focusTier2" label="Focus_Tier2" width="110">
                    </el-table-column>
                    <el-table-column prop="focusTier3" label="Focus_Tier3" width="110">
                    </el-table-column>
                    <el-table-column prop="listPrice" label="List_Price" width="120" sortable
                        :sort-method="(a, b) => { return a.listPrice - b.listPrice }">
                    </el-table-column>
                    <el-table-column prop="cost" label="Cost" width="100" sortable
                        :sort-method="(a, b) => { return a.cost - b.cost }"></el-table-column>

                    <el-table-column prop="revenue" label="Revenue" width="120" sortable
                        :sort-method="(a, b) => { return a.revenue - b.revenue }"></el-table-column>
                    <el-table-column prop="discount" label="Discount" width="120" sortable
                        :sort-method="(a, b) => { return a.discount - b.discount }"></el-table-column>
                    <el-table-column prop="discountedPrice" label="Discounted_Price" width="170" sortable
                        :sort-method="(a, b) => { return a.discountedPrice - b.discountedPrice }"></el-table-column>

                    <el-table-column fixed="right" label="Action" width="120">
                        <template slot-scope="scope">
                            <el-button @click.native.prevent="editRow(scope.row.id)" type="text" size="small">
                                edit
                            </el-button>
                            <el-button @click.native.prevent="deleteRow(scope.row.id)" type="text" size="small">
                                delete
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>

        </el-container>

        <!--edit dialog-->
        <el-dialog title="Edit Item" :visible.sync="editDialogFormVisible" width="650px">
            <el-form :model="editForm" :inline="true" size="mini">
                <el-row>
                    <el-form-item label="Category:" :label-width="formLabelWidth" :style="{ float: 'left' }">
                        <el-input v-model="editForm.category"></el-input>
                    </el-form-item>
                    <el-form-item label="Code:" :label-width="formLabelWidth" :style="{ float: 'right' }">
                        <el-input v-model="editForm.code"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="Item Name:" :label-width="formLabelWidth" :style="{ float: 'left' }">
                        <el-input v-model="editForm.name">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="Chinese Name:" :label-width="formLabelWidth" :style="{ float: 'right' }">
                        <el-input v-model="editForm.chineseName">
                        </el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="Gender:" :label-width="formLabelWidth" :style="{ float: 'left' }">
                        <el-select v-model="editForm.gender" placeholder="gender">
                            <el-option label="F" value="F"></el-option>
                            <el-option label="M" value="M"></el-option>
                            <el-option label="M/F" value="M/F"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="Age:" :label-width="formLabelWidth" :style="{ float: 'right' }">
                        <el-input v-model="editForm.age"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="Focus Tier1:" :label-width="formLabelWidth" :style="{ float: 'left' }">
                        <el-input v-model="editForm.focusTier1"></el-input>
                    </el-form-item>
                    <el-form-item label="Focus Tier2:" :label-width="formLabelWidth" :style="{ float: 'right' }">
                        <el-input v-model="editForm.focusTier2"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="Focus Tier3:" :label-width="formLabelWidth" :style="{ float: 'left' }">
                        <el-input v-model="editForm.focusTier3"></el-input>
                    </el-form-item>
                    <el-form-item label="List Price:" :label-width="formLabelWidth" :style="{ float: 'right' }">
                        <el-input v-model="editForm.listPrice"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="Cost:" :label-width="formLabelWidth" :style="{ float: 'left' }">
                        <el-input v-model="editForm.cost"></el-input>
                    </el-form-item>
                    <el-form-item label="Revenue:" :label-width="formLabelWidth" :style="{ float: 'right' }">
                        <el-input v-model="editForm.revenue"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="Discount:" :label-width="formLabelWidth" :style="{ float: 'left' }">
                        <el-input v-model="editForm.discount"></el-input>
                    </el-form-item>
                    <el-form-item label="Discounted Price:" :label-width="formLabelWidth" :style="{ float: 'right' }">
                        <el-input v-model="calculatedDiscountedPrice" :disabled="true"></el-input>
                    </el-form-item>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editDialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="edit">确 定</el-button>
            </div>
        </el-dialog>

        <!--add dialog-->
        <el-dialog title="Add Item" :visible.sync="addDialogFormVisible" width="650px">
            <el-form :model="addForm" :inline="true" size="mini">
                <el-row>
                    <el-form-item label="Category:" :label-width="formLabelWidth" :style="{ float: 'left' }">
                        <el-input v-model="addForm.category"></el-input>
                    </el-form-item>
                    <el-form-item label="Code:" :label-width="formLabelWidth" :style="{ float: 'right' }">
                        <el-input v-model="addForm.code"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="Item Name:" :label-width="formLabelWidth" :style="{ float: 'left' }">
                        <el-input v-model="addForm.name">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="Chinese Name:" :label-width="formLabelWidth" :style="{ float: 'right' }">
                        <el-input v-model="addForm.chineseName">
                        </el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="Gender:" :label-width="formLabelWidth" :style="{ float: 'left' }">
                        <el-select v-model="addForm.gender" placeholder="gender">
                            <el-option label="F" value="F"></el-option>
                            <el-option label="M" value="M"></el-option>
                            <el-option label="M/F" value="M/F"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="Age:" :label-width="formLabelWidth" :style="{ float: 'right' }">
                        <el-input v-model="addForm.age"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="Focus Tier1:" :label-width="formLabelWidth" :style="{ float: 'left' }">
                        <el-input v-model="addForm.focusTier1"></el-input>
                    </el-form-item>
                    <el-form-item label="Focus Tier2:" :label-width="formLabelWidth" :style="{ float: 'right' }">
                        <el-input v-model="addForm.focusTier2"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="Focus Tier3:" :label-width="formLabelWidth" :style="{ float: 'left' }">
                        <el-input v-model="addForm.focusTier3"></el-input>
                    </el-form-item>
                    <el-form-item label="List Price:" :label-width="formLabelWidth" :style="{ float: 'right' }">
                        <el-input v-model="addForm.listPrice"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="Cost:" :label-width="formLabelWidth" :style="{ float: 'left' }">
                        <el-input v-model="addForm.cost"></el-input>
                    </el-form-item>
                    <el-form-item label="Revenue:" :label-width="formLabelWidth" :style="{ float: 'right' }">
                        <el-input v-model="addForm.revenue"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="Discount:" :label-width="formLabelWidth" :style="{ float: 'left' }">
                        <el-input v-model="addForm.discount"></el-input>
                    </el-form-item>
                    <el-form-item label="Discounted Price:" :label-width="formLabelWidth" :style="{ float: 'right' }">
                        <el-input v-model="addFormCalculatedDiscountedPrice" :disabled="true"></el-input>
                    </el-form-item>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addDialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
            </div>
        </el-dialog>

    </div>

</template>
<script>
import axios from "axios"
export default {
    data() {
        return {
            baseURL: "http://47.115.43.236:8181",
            searchForm: {
                name: '',
                gender: '',
                age: '',
                focusTier1: '',
                focusTier2: '',
                listPrice: '',
                cost: '',
                revenue: '',
                discount: '',
                discountedPrice: '',
            },
            size: '',
            currentPage: '',
            total: '',
            tableData: [],
            dialogVisible: false,
            editDialogFormVisible: false,
            editForm: {},
            addForm: {},
            addDialogFormVisible: false,
        }
    },
    created() {
        const _this = this
        _this.findAllHpi()
    },
    computed: {
        calculatedDiscountedPrice() {
            const _this = this
            _this.editForm.discountedPrice = (100 - _this.editForm.discount) * _this.editForm.listPrice / 100;
            return _this.editForm.discountedPrice
        },
        addFormCalculatedDiscountedPrice() {
            const _this = this
            _this.addForm.discountedPrice = (100 - _this.addForm.discount) * _this.addForm.listPrice / 100;
            return _this.addForm.discountedPrice
        },
    },
    methods: {
        findAllHpi() {
            const _this = this
            axios.get(_this.baseURL + '/hpi/getAllHpi', {
                params: {
                    name: _this.searchForm.name,
                    gender: _this.searchForm.gender,
                    age: _this.searchForm.age,
                    focusTier1: _this.searchForm.focusTier1,
                    focusTier2: _this.searchForm.focusTier2,
                    focustier3: _this.searchForm.focusTier3,
                    listPrice: _this.searchForm.listPrice,
                    cost: _this.searchForm.cost,
                    revenue: _this.searchForm.revenue,
                    discount: _this.searchForm.discount,
                    discountedPrice: _this.searchForm.discountedPrice,
                    current: _this.currentPage,
                    size: _this.size
                }
            }
            ).then(function (res) {
                // console.log(res.data.data)
                _this.size = res.data.data.size
                _this.currentPage = res.data.data.current
                _this.total = res.data.data.total
                _this.tableData = res.data.data.records
            })
        },
        onSubmit() {
            const _this = this
            _this.findAllHpi()
        },
        deleteRow(id) {
            const _this = this
            // console.log(id);
            this.$confirm('此操作将永久删除该行, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                axios.get(_this.baseURL + '/hpi/deleteHpiById/', {
                    params: {
                        id: id
                    }
                }
                ).then(function (res) {
                    console.log(res.data)
                    _this.$message({
                        showClose: true,
                        message: '删除成功!',
                        type: 'success',
                        onClose: () => {

                        }
                    })
                    _this.findAllHpi()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });


        },
        editRow(index) {
            // console.log(index);
            const _this = this
            axios.get(_this.baseURL + '/hpi/getHpiById/', {
                params: {
                    id: index
                }
            }).then(function (res) {
                // console.log(res.data.data)
                _this.editForm = res.data.data
                _this.editDialogFormVisible = true
            })
        },
        edit() {
            const _this = this
            this.$confirm('此操作将修改该行, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                axios.post(_this.baseURL + '/hpi/updateHpi/', _this.editForm).then(function (res) {
                    // console.log(res.data)
                    _this.findAllHpi()
                    _this.editDialogFormVisible = false
                    _this.$message({
                        showClose: true,
                        message: '修改成功!',
                        type: 'success',
                        onClose: () => {
                        }
                    })
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        showAddDialog() {
            const _this = this
            _this.addForm = {}
            _this.addDialogFormVisible = true
        },
        add() {
            const _this = this
            axios.post(_this.baseURL + '/hpi/addHpi/', _this.addForm).then(function (res) {
                // console.log(res.data)
                _this.findAllHpi()
                _this.addDialogFormVisible = false
                _this.$message({
                    showClose: true,
                    message: '添加成功!',
                    type: 'success',
                    onClose: () => { }
                })
            })
        },
        handleCurrentChange(currentPage) {
            // console.log('currentPage', currentPage);
            const _this = this
            _this.currentPage = currentPage
            _this.findAllHpi()
        },
        handleSizeChange(size) {
            // console.log('size', size);
            const _this = this
            _this.size = size
            _this.findAllHpi()
        },
    }
}
</script>